<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 填写样式 */
      .hide {
        display: none;
      }
    </style>
  </head>

  <body>
    <!-- 填写标签 -->
    <div id="jsCountdown">
      <span>01天</span>
      <span>02:</span>
      <span>03:</span>
      <span>04</span>
    </div>
    <script type="text/javascript">
      // 填写JavaScript
      // 倒计时是web开发中常见的组件，请完成second和render两个函数，完成倒计时的显示部分
      // 1、second函数的输入为整数，返回{day: Int, hour: Int, min: Int, second: Int}
      // 2、render函数的输入为second函数的输出，将数据在页面对应的DOM元素上显示出来，格式如html所示
      // 3、如果day为0，隐藏对应的DOM元素，否则显示（请直接使用已经实现的css代码）
      // 4、数值不足两位，前面补充0
      function second(second) {
        // second 为输入的秒数，返回 天数，小时数，分钟数，秒数
        return {
          day: Math.floor(second / (24 * 3600)),
          hour: Math.floor((second / 3600) % 24),
          min: Math.floor((second / 60) % 60),
          second: Math.floor(second % 60)
        }
      }

      function render(data) {
        // 渲染函数
        // 补零对齐
        for (let item in data) {
          data[item] = data[item] > 9 ? data[item] : '0' + data[item]
        }
        console.log(data)
        let renderDom = document.getElementById('jsCountdown')
        if (data.day == '00') {
          renderDom.children[0].classList.add('hide')
        } else {
          renderDom.children[0].innerHTML = data.day + '天'
        }
        renderDom.children[1].innerHTML = data.hour + ':'
        renderDom.children[2].innerHTML = data.min + ':'
        renderDom.children[3].innerHTML = data.second
      }
      // 调用方式
      // render(second(3604))
    </script>
  </body>
</html>
